<template>
    <div class="app-container">
        <el-form ref="thesisForm" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="课题名称" prop="title">
                <el-col :span="8">
                    <el-input  v-model="form.title" />
                </el-col>
            </el-form-item>

            <el-form-item label="课题年份" prop="year">
                <el-date-picker  
                    v-model="form.year"
                    type="year"
                    format="yyyy"
                    value-format="yyyy"
                    placeholder="选择年份"
                />
            </el-form-item>

            <div class="medium" >
                
                    年份以学生毕业年份为准。2020毕业的学生，此处选2020。
                
            </div>

            <el-form-item label="课题内容" prop="content">
                <el-col :span="8">
                    <el-input v-model="form.content" type="textarea" rows="10" />
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-button type="primary"  @click="onSubmit(form.id)">保存</el-button>
                <el-button @click="onCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { postTheses,putTheses } from '@/api/theses'
export default {
   data(){
       return{
           thisis:{},
           form: {
            id: this.$route.query.id,
            uid: this.$store.state.user.uid,
            year: this.$store.state.user.created,
            title: this.$route.query.title,
            content:''
           },



           rules: {
               title: [
                   {required: true, message: '请输入标题',trigger: 'blur'},
                   {min: 1, max: 500, message: '长度在 1 到 500 个字符',trigger: 'blur'}
               ],
               content: [
                   {max: 1000, message:'不能超过1000个字符', trigger:'blur'}
               ],
               year: [
                   { required: true, message:'请选择年份',trigger:'blur'}
               ]
           },

       }

   },

    computed: {
        uid(){
          return this.$store.state.user.uid
        }
    },

    created() {
        console.log("route:",this.$route)
        console.log("router:",this.$router)

    },

    methods: {
        
        onSubmit(id){
            console.log(id)
            console.log(this.form)
            this.$refs['thesisForm'].validate((valid) =>{
                if(!valid) {
                    return false
                }
                else if(id){
                    putTheses(this.form,id).then(res =>{
                    console.log(res)
                     // 跳转到上个界面
                    this.$message({
                      message: '修改成功！！！！',
                      type: 'success'
                    })
                    this.$router.go(-1)
                    })
                }
                else {
                postTheses(this.form).then(res =>{
                    console.log(res)
                    this.$message({
                      message: '创建成功！！！！',
                      type: 'success'
                    })
                     // 跳转到上个界面
                    this.$router.go(-1)
                })
                }



            })
        },

        onCancel(){
            this.$confirm('确认不保存？').then(_ =>{
                this.$store.dispatch('tagsView/delVisitedView', this.$route)
                //返回前一个标签
                this.$router.go(-1)
            })
        }

    }
}
</script>

<style scoped>
    .medium{
        display: block;
        width: 479.86px;
        height: 52px;
        margin-bottom: 22px;
        margin-left: 100px;
        background-color: #fff8e6;
        line-height: 46px;
        text-align: center;
        color: #ffba00;
        font-size: 14px;
         
    }


</style>